<template>
  <div class="content_box">
    <VHeader :list-data="interimListData" :option-config="option" @change="search">
      <el-button circle icon="el-icon-refresh" @click="deleteData('/recycleJudge.do', deleteArr)" />
      <el-button circle icon="el-icon-delete" @click="deleteData('/deleteJudge.do', deleteArr)" />
      <el-button circle icon="el-icon-refresh-right" @click="getListData" />
    </VHeader>
    <VTable
      :list-data="listData[pageConfig.Page - 1]"
      :loading="loading"
      :table-config="tableConfig"
      @select-change="selectChange"
    >
      <template v-slot:operate="scope">
        <el-button-group>
          <el-button icon="el-icon-refresh" type="primary" @click="deleteData('/recycleSingle.do', [{ key: scope.data.row.key }])" />
          <el-button icon="el-icon-edit" type="primary" @click="showUpData(scope.data.row)" />
          <el-button icon="el-icon-delete" type="primary" @click="deleteData('/deleteSingle.do',[{ key: scope.data.row.key }] )" />
        </el-button-group>
      </template>
    </VTable>
    <el-dialog :visible.sync="editViews" destroy-on-close title="修改单选题" width="30%">
      <el-form :model="editData" :rules="add_rules" label-position="right" label-width="80px" @submit.native.prevent>
        <el-form-item label="题目名称" prop="single_name" size="small">
          <el-input v-model="editData.single_name" clearable />
        </el-form-item>
        <el-form-item label="A" size="small">
          <el-input v-model="editData.A" clearable />
        </el-form-item>
        <el-form-item label="B" size="small">
          <el-input v-model="editData.B" clearable />
        </el-form-item>
        <el-form-item label="C" size="small">
          <el-input v-model="editData.C" clearable />
        </el-form-item>
        <el-form-item label="D" size="small">
          <el-input v-model="editData.D" clearable />
        </el-form-item>
        <el-form-item label="正确答案" prop="right_key" size="small">
          <el-radio v-model="editData.right_key" label="A">A</el-radio>
          <el-radio v-model="editData.right_key" label="B">B</el-radio>
          <el-radio v-model="editData.right_key" label="C">C</el-radio>
          <el-radio v-model="editData.right_key" label="D">D</el-radio>
        </el-form-item>
        <el-form-item label="选择科目" prop="subject_name" size="small">
          <el-cascader
            v-model="editData.subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            clearable
            filterable
          />
        </el-form-item>
        <el-form-item>
          <el-button :disabled="!editData.single_name || !editData.right_key || !editData.subject_name" type="primary" @click="upData(editData)">修改</el-button>
          <el-button @click="re">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-pagination
      :current-page.sync="pageConfig.Page"
      :size-change="pageConfig.size"
      :total="pageConfig.total"
      background
      class="Pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChange"
      @current-change="setPage"
    />
  </div>
</template>

<script>
import { getSubjectsListApi } from '@/api/table'
import { getSinglesApi, updateSingleApi } from '@/api/problem'
import { deleteData, getSubjectOption, pageSizeChange, tableDataProcess } from '@/utils/diy_funtion'
export default {
  name: 'ProblemSingle',
  data() {
    return {
      listData: [],
      interimListData: [],
      subjectOption: getSubjectOption(),
      tableConfig: {
        table_show: {
          add_time: '创建时间',
          major_name: '所属专业',
          subject_name: '所属科目',
          single_name: '题目',
          A: 'A',
          B: 'B',
          C: 'C',
          D: 'D',
          right_key: '答案'
        },
        sortable: { key: true, add_time: true, major_name: true, subject_name: true },
        selection: true,
        align: 'center',
        operate: 200
      },
      option: {
        option_name: ['科目', '专业', '题目'],
        object_name: ['subject_name', 'major_name', 'single_name']
      },
      editData: {},
      editViews: false,
      loading: true,
      searchSelect: 0,
      searchValue: '',
      searchOption: ['科目名称', '专业名称', '题目'],
      addViews: false,
      add_data: { single_name: '', A: '', B: '', C: '', D: '', right_key: '', subject_name: '' },
      subject_list: [],
      add_rules: {
        single_name: [
          { required: true, message: '请输入题目名称', trigger: 'blur' }
        ],
        right_key: [
          { required: true, message: '请选择正确答案', trigger: 'blur' }
        ]
      },
      deleteArr: [],
      pageConfig: {
        total: 1,
        Page: 1,
        size: [10, 20, 50, 100],
        pagesSize: 10
      }
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    // 换页
    pageSizeChange: pageSizeChange,
    // 删除表数据
    deleteData: deleteData,
    getListData() {
      this.loading = true
      this.subject_list = []
      getSinglesApi().then((response) => {
        const dd = []
        for (const f in response.data.data) {
          if (!response.data.data[f].status) {
            dd.push(response.data.data[f])
          }
        }
        response.data.data = dd
        const { newListData, data } = tableDataProcess(
          response.data.data,
          this.pageConfig.pagesSize
        )
        setTimeout(() => (this.loading = false), 500)
        this.pageConfig.total = data.length
        this.listData = newListData
        this.interimListData = data
      })
      getSubjectsListApi().then((res) => {
        for (const i in res.data.data) {
          res.data.data[i].status = !res.data.data[i].status
          this.subject_list.push({
            subject_name: res.data.data[i].subject_name,
            status: res.data.data[i].status
          })
        }
      })
    },
    showUpData(data) {
      this.editData = JSON.parse(JSON.stringify(data))
      this.editViews = true
    },
    // 表多选时
    selectChange(v) {
      this.deleteArr = v
    },
    upData(data) {
      updateSingleApi(data).then((response) => {
        this.getListData()
        this.editViews = false
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
      })
    },
    re() {
      this.add_data = {}
      Object.keys(this.editData).forEach(item => {
        if (item !== 'key') this.editData[item] = null
      })
    },
    setPage(v) {
      this.pageConfig.Page = v
    },
    // 搜索
    search(value) {
      this.listData = value.data
      this.pageConfig.total = value.total
    }
  }
}
</script>

<style scoped lang="scss">
.content_box{
  .el-button-group{
    display: flex;
    justify-content: center;
  }
}
</style>
